<!DOCTYPE html>
<html>

<head>
    <title>车辆监控·车队管理系统</title>

    {include file="common/header"/}
    <el-main>
        <!--                <el-table >-->
        <!--                    <el-table-column label="日期" width="140">-->
        <!--                    </el-table-column>-->
        <!--                    <el-table-column label="姓名" width="120">-->
        <!--                    </el-table-column>-->
        <!--                    <el-table-column label="地址">-->
        <!--                    </el-table-column>-->
        <!--                </el-table>-->
        <div id="container"></div>
    </el-main>
    {include file="common/footer"/}
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=p8FRTGZ4V26VzvT6Kot8fM8DFxG8UGVv"></script>
    <script>
        new Vue({
            el: '#app',
            data:{
                len : 106.4737810,
                lat : 29.5675670,
                username : "",
                loc:[

                ],
            },
            mounted () {

                this.abcd();
                this.abc();
                setTimeout(()=>{   //设置延迟执行
                this.baiduMap();
                },500);

                // this.username = getCookie('username');

            },

            methods: {
                logOut() {
                    var that = this;
                    axios.post('user/logout')
                        .then(function (response)
                        {
                            if (response.data.code == 200) {
                                that.$message({
                                    message: '退出成功,正在跳转中',
                                    type: 'success'
                                });
                                setTimeout(function () {
                                    location.replace('');
                                }, 1000)
                            } else {
                                that.$message.error(response.data.msg);
                            }
                        })
                        .catch(function (error)
                        {
                            that.$message.error('tuichu失败，服务器内部错误');
                        })
                    ;

                },
                abcd(){
                    var that = this;
                    axios.post('user/getmyvalue')
                        .then(function (response)
                        {
                            if(response.data.code==200){
                                that.username = response.data.data.name;
                            }
                        })

                },
                abc(){
                    var that = this;
                    axios.post('car/getemergency')
                        .then(function (response)
                        {
                            that.loc= response.data.data;
                        })

                },
                baiduMap(){

                    var that = this;
                    var marker = [];
                    var opts = {
                        width: 200,
                        height: 130,
                        title: '事故信息'
                    };
                    var map = new BMapGL.Map('container');
                    var point = new BMapGL.Point(this.len, this.lat);
                    map.centerAndZoom(point, 15);

                    var myIcon = new BMapGL.Icon('https://i.loli.net/2021/04/27/G5X3tms7Zcdvf8R.png', new BMapGL.Size(50, 50));
                    //创建Marker标注，使用emergency图标
                    for (var i in that.loc) {

                        var pt = new BMapGL.Point(parseFloat(this.loc[i].lng), parseFloat(this.loc[i].lat));

                        translateCallback = function(i_shadowed){return function (data){

                            marker[i_shadowed] = new BMapGL.Marker(data.points[0], {
                                icon: myIcon
                            });
                            map.addOverlay(marker[i_shadowed]);

                            var tmp;
                            switch(that.loc[i_shadowed].type) {
                                case 'small_passenger': tmp = "小型客车";break;
                                case 'mid_passenger':   tmp = "中型客车";break;
                                case 'large_passenger': tmp = "大型客车";break;
                                case 'small_cargo':     tmp = "小型货车";break;
                                case 'mid_cargo':       tmp = "中型货车";break;
                                case 'large_cargo':     tmp = "大型货车";break;
                            }

                            //闭包完成点击事件的参数传递

                            var infoWindow = new BMapGL.InfoWindow('牌照：'+that.loc[i_shadowed].license+'</br>驾驶员：'+that.loc[i_shadowed].name+'</br>车辆类型：'+tmp+'</br>时间：'+that.loc[i_shadowed].time+'</br>备注：'+that.loc[i_shadowed].remark, opts);
                            marker[i_shadowed].addEventListener("click", function () {
                                this.openInfoWindow(infoWindow,data.points[0]);
                            });

                        }}
                        var convertor = new BMapGL.Convertor();
                        var pointArr = [];
                        pointArr.push(pt);
                        convertor.translate(pointArr, COORDINATES_WGS84, COORDINATES_BD09, translateCallback(i))
                    }


                    map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
                    //定义一个控件类
                }
            }
        })
    </script>

</html>